<template>
  <section>
    <!--工具条 - 高级查询框-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input
            v-model="query.keyword"
            placeholder="请输入关键字"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="pageInfo.rows"
      highlight-current-row
      height="650"
      v-loading="listLoading"
      @selection-change="selsChange"
      style="width: 100%"
    >
      <el-table-column type="selection" fixed width="55"> </el-table-column>
      <el-table-column type="index" fixed width="60"> </el-table-column>
      <el-table-column prop="title" label="名称" width="120" sortable>
      </el-table-column>
      <el-table-column prop="cover" label="封面图" width="120" sortable>
        <template slot-scope="scope">
          <img :src="scope.row.cover" width="30px" height="30px" />
        </template>
      </el-table-column>
      <el-table-column prop="saleprice" label="原价" width="100" sortable>
      </el-table-column>
      <el-table-column prop="costprice" label="折扣价" width="100" sortable>
      </el-table-column>
      <el-table-column prop="isnew" label="是否新车" width="120" sortable>
        <template slot-scope="scope">
          <span v-if="scope.isnew == 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="reigstertime"
        label="上牌时间"
        width="100"
        sortable
      >
      </el-table-column>
      <el-table-column prop="mileage" label="里程数" width="100" sortable>
      </el-table-column>
      <el-table-column prop="shopname" label="店铺名称" width="100" sortable>
      </el-table-column>
      <el-table-column prop="onsaletime" label="上架时间" width="100" sortable>
      </el-table-column>
      <el-table-column prop="offsaletime" label="下架时间" width="100" sortable>
      </el-table-column>
      <el-table-column prop="state" label="状态" min-width="100" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.state == 1" style="color: blue">上架</span>
          <span v-else>下架</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="costeffective"
        label="超值"
        min-width="100"
        sortable
      >
        <template slot-scope="scope">
          <span v-if="scope.row.costeffective == 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="rushsale" label="急售" min-width="100" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.rushsale == 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="quasinewcar"
        label="准新车"
        min-width="100"
        sortable
      >
        <template slot-scope="scope">
          <span v-if="scope.row.quasinewcar == 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="transitivecountry"
        label="可提全国"
        min-width="100"
        sortable
      >
        <template slot-scope="scope">
          <span v-if="scope.row.transitivecountry == 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="type.name" label="类型" width="100" sortable>
      </el-table-column>
      <el-table-column
        prop="seller.nickName"
        label="营销人员"
        width="100"
        sortable
      >
      </el-table-column>
      <el-table-column prop="auditstate" label="审核状态" width="100" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.auditstate == 1">已审核</span>
          <span v-else>未审核</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="handleDel(scope.$index, scope.row)"
            >删除</el-button
          >
          <br />
          <el-button
            type="danger"
            size="small"
            style="margin-top: 10px"
            @click="handleResource(scope.$index, scope.row)"
            >资源维护</el-button
          >
          <br />
          <el-button
            type="danger"
            size="small"
            style="margin-top: 10px"
            @click="handleUpCheck(scope.$index, scope.row)"
            >上传检测报告</el-button
          >
          <el-button
            type="danger"
            size="small"
            style="margin-top: 10px"
            @click="handleMyCheck(scope.$index, scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--工具条 - 批量删除&分页条-->
    <el-col :span="24" class="toolbar">
      <el-button
        type="danger"
        @click="batchRemove"
        :disabled="this.sels.length === 0"
        >批量删除</el-button
      >
      <el-pagination
        layout="prev, pager, next"
        :current-page="query.currentPage"
        @current-change="handleCurrentChange"
        :page-size="query.pageSize"
        :total="pageInfo.total"
        style="float: right"
      >
      </el-pagination>
    </el-col>

    <!--新增/编辑界面-->
    <el-dialog
      title="新增/修改"
      :visible.sync="carFormVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="carForm"
        label-width="80px"
        :rules="carFormRules"
        ref="carForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="carForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面" prop="cover">
          <el-upload
            class="upload-demo"
            action="http://localhost:8080/fastDfs/upload"
            :on-remove="coverHandleRemove"
            :on-success="coverHandleSuccess"
            :file-list="coverFileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <img
            :src="carForm.cover"
            style="width: 50px; height: 60px"
            v-if="carForm.cove"
            alt=""
          />
        </el-form-item>
        <el-form-item label="原价" prop="saleprice">
          <el-input
            v-model="carForm.saleprice"
            type="number"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="售价" prop="costprice">
          <el-input
            v-model="carForm.costprice"
            type="number"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否新车">
          <el-radio-group v-model="carForm.isnew">
            <el-radio class="radio" :label="1">新车</el-radio>
            <el-radio class="radio" :label="0">二手车</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上牌时间" prop="reigstertime">
          <el-date-picker
            v-model="carForm.reigstertime"
            type="date"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="行驶里程" prop="mileage">
          <el-input v-model="carForm.mileage" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="上架时间" prop="onsaletime">
          <el-date-picker
            v-model="carForm.onsaletime"
            type="date"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="下架时间" prop="offsaletime">
          <el-date-picker
            v-model="carForm.offsaletime"
            type="date"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否超值" prop="costeffective">
          <el-radio-group v-model="carForm.costeffective">
            <el-radio class="radio" :label="1">超值</el-radio>
            <el-radio class="radio" :label="0">不超值</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否急售" prop="rushsale">
          <el-radio-group v-model="carForm.rushsale">
            <el-radio class="radio" :label="1">急售</el-radio>
            <el-radio class="radio" :label="0">不急</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否准新车" prop="quasinewcar">
          <el-radio-group v-model="carForm.quasinewcar">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">不是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可提全国" prop="transitivecountry">
          <el-radio-group v-model="carForm.transitivecountry">
            <el-radio class="radio" :label="1">是</el-radio>
            <el-radio class="radio" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="类型">
          <!-- <el-input v-model="addForm.parent.id"></el-input> -->
          <el-cascader
            v-model="carForm.type"
            :options="carTypeTree"
            :props="{
              checkStrictly: true,
              label: 'name',
              value: 'id',
            }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="销售人员">
          <!-- <el-input v-model="addForm.manager.id" ></el-input> -->
          <el-select
            v-model="carForm.seller"
            clearable
            value-key="id"
            placeholder="请选择"
          >
            <!--下拉选项
						  :key=""  //唯一标识
						  :label 选择之后展示到选择框中的值
						  :value 选中之后绑定给模型层的值  如果要绑定对象给模型层 有一个大坑
						     必须要写  value-key="id"
						-->
            <el-option
              v-for="item in employees"
              :key="item.id"
              :label="item.nickName"
              :value="item"
            >
              <span style="float: left">{{ item.nickName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.email
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详情信息" prop="carDetail">
          <quill-editor
            v-model="carForm.carDetail.info"
            :options="quillOptions"
          >
          </quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="carFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="save" :loading="carFormLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>

<!-- 资源维护 -->
    <el-dialog
      title="资源维护"
      :visible.sync="carResourceVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="carResource" label-width="80px" ref="carResourceForm">
        <el-form-item label="主图">
          <el-upload
            class="upload-demo"
            action="http://localhost:8080/fastDfs/upload"
            :on-remove="imgHandleRemove"
            :on-success="imgHandleSuccess"
            :file-list="imgFileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="副图">
          <el-upload
            class="upload-demo"
            action="http://localhost:8080/fastDfs/upload"
            :on-remove="viceimgHandleRemove"
            :on-success="viceimgHandleSuccess"
            :file-list="viceimgFileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="更多图片">
          <el-upload
            class="upload-demo"
            action="http://localhost:8080/fastDfs/upload"
            :on-remove="moreimgHandleRemove"
            :on-success="moreimgHandleSuccess"
            :file-list="moreimgFileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="carResourceVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="saveCarResource"
          :loading="addLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <!-- 检测报告 -->
    <el-dialog
      title="检测报告"
      :visible.sync="carCheckVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="carCheck" label-width="80px">
        <el-form-item label="检测时间" prop="detectiontime">
          <el-date-picker
            v-model="carCheck.detectiontime"
            type="date"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="检测人员">
          <!-- <el-input v-model="addForm.manager.id" ></el-input> -->
          <el-select
            v-model="carCheck.detector"
            clearable
            value-key="id"
            placeholder="请选择"
          >
            <!--下拉选项
						  :key=""  //唯一标识
						  :label 选择之后展示到选择框中的值
						  :value 选中之后绑定给模型层的值  如果要绑定对象给模型层 有一个大坑
						     必须要写  value-key="id"
						-->
            <el-option
              v-for="item in employees"
              :key="item.id"
              :label="item.nickName"
              :value="item"
            >
              <span style="float: left">{{ item.nickName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.email
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事故排查" prop="accidentInvestigation">
          <el-upload
            class="upload-demo"
            action="http://localhost:8080/fastDfs/upload"
            :on-remove="checkHandleRemove"
            :on-success="checkHandleSuccess"
            :file-list="checkFileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <img
            :src="carCheck.accidentInvestigation"
            style="width: 50px; height: 60px"
            v-if="carCheck.accidentInvestigation"
            alt=""
          />
        </el-form-item>
        <el-form-item label="核心部件检测" prop="coreComponentsInvestigation">
          <el-upload
            class="upload-demo"
            action="http://localhost:8080/fastDfs/upload"
            :on-remove="checkcoreHandleRemove"
            :on-success="checkcoreHandleSuccess"
            :file-list="checkcoreFileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <img
            :src="carCheck.coreComponentsInvestigation"
            style="width: 50px; height: 60px"
            v-if="carCheck.coreComponentsInvestigation"
            alt=""
          />
        </el-form-item>
        <el-form-item label="常用功能检测" prop="commonFunctionsInvestigation">
          <el-upload
            class="upload-demo"
            action="http://localhost:8080/fastDfs/upload"
            :on-remove="checkfunctionHandleRemove"
            :on-success="checkfunctionHandleSuccess"
            :file-list="checkfunctionFileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <img
            :src="carCheck.commonFunctionsInvestigation"
            style="width: 50px; height: 60px"
            v-if="carCheck.commonFunctionsInvestigation"
            alt=""
          />
        </el-form-item>
        <el-form-item label="外观内饰检测" prop="appearanceInspection">
          <el-upload
            class="upload-demo"
            action="http://localhost:8080/fastDfs/upload"
            :on-remove="checkranceHandleRemove"
            :on-success="checkranceHandleSuccess"
            :file-list="checkranceFileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <img
            :src="carCheck.appearanceInspection"
            style="width: 50px; height: 60px"
            v-if="carCheck.appearanceInspection"
            alt=""
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="carCheckVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="saveCarCheck"
          :loading="addLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>

<!-- 手动审核 -->
    <el-dialog
      title="审核"
      :visible.sync="myCheckVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="carForm" label-width="80px">
        <el-form-item label="审核是否通过">
          <el-radio-group v-model="carForm.auditstate">
            <el-radio class="radio" :label="1">通过</el-radio>
            <el-radio class="radio" :label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="myCheckVisible = false">取消</el-button>
        <el-button type="primary" @click.native="myCheckSubmit">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' //调用编辑器
import quillConfig from '../../common/js/quill-config.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      quillOptions: quillConfig,
      query: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        keyword: '', // 关键字
      },
      pageInfo: {
        total: 0,
        rows: [],
      },
      listLoading: false,
      sels: [], //列表选中列

      carFormVisible: false, //新增修改界面是否显示
      carFormLoading: false,
      carFormRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      },
      employees: [],
      carTypeTree: [], // 车辆类型树
      //新增修改界面数据
      carForm: {
        id: null,
        title: '',
        cover: '',
        saleprice: '',
        costprice: '',
        isnew: '',
        reigstertime: '',
        mileage: '',
        shopname: '',
        onsaletime: '',
        offsaletime: '',
        state: '',
        costeffective: '',
        rushsale: '',
        quasinewcar: '',
        transitivecountry: '',
        type: {
          id: null,
          name: '',
        },
        seller: {
          id: null,
          nickName: '',
        },
        carDetail: {
          info: '',
        },
        auditstate: '',
      },
      addLoading: false,
      carResource:{
        carId:null,
        img:"",
        viceimg:"",
        moreimg:""
      },
      carResourceVisible: false,
      coverFileList: [], // 封面图片的图片列表
      imgFileList:[],
      viceimgFileList:[],
      moreimgFileList:[],
      carDetail: '',
      //车辆检测
      carCheck: {
        detectiontime: '',
        // 检测人员
        detector: {
          id: null,
          nickName: ''
        },
        // 事故排查图片
        accidentInvestigation: '',
        // 核心部件检测
        coreComponentsInvestigation: '',
        // 常用功能检测
        commonFunctionsInvestigation: '',
        // 外观内饰检测
        appearanceInspection: ''
      },
      checkFileList: [],
      checkcoreFileList:[],
      checkfunctionFileList: [],
      checkranceFileList: [],
      carCheckVisible: false,

      // 手动审核
      myCheckVisible: false
    }
  },
  methods: {
    myCheckSubmit(){

    },
    handleMyCheck(index,row){
      this.myCheckVisible = true
    },
    handleUpCheck(index,row){
      this.carCheckVisible = true
      this.carCheck = {
        carId: row.id,
        detectiontime: '',
        // 检测人员
        detector: {
          id: null,
          nickName: ''
        },
        // 事故排查图片
        accidentInvestigation: '',
        // 核心部件检测
        coreComponentsInvestigation: '',
        // 常用功能检测
        commonFunctionsInvestigation: '',
        // 外观内饰检测
        appearanceInspection: ''
      }
      // 查询所有检测员
      this.getEmployeeList()
    },
    // 提交检测
    saveCarCheck(){
      this.$confirm('确认提交吗？', '提示', {}).then(() => {
        this.addLoading = true;
        console.log("提交数据",this.carCheck);
        this.$http.put("/carDetail",this.carCheck)
            .then(result => {
              result = result.data;
              if(result.success){
                // 操作成功:要关闭加载框 刷新当前数据  提示删除成功
                this.addLoading = false;
                // 关闭弹框
                this.carCheckVisible = false;
                this.$message({message: '保存成功!', type: 'success'});
              }else{
                this.$message({message: result.message, type: 'error'});
              }
            })
      });
    },
    saveCarResource(){
      this.$confirm('确认提交吗？', '提示', {}).then(() => {
        this.addLoading = true;
        console.log("提交数据",this.carResource);
        this.$http.put("/carResources",this.carResource)
            .then(result => {
              result = result.data;
              if(result.success){
                // 操作成功:要关闭加载框 刷新当前数据  提示删除成功
                this.addLoading = false;
                // 关闭弹框
                this.carResourceVisible = false;
                this.$message({message: '保存成功!', type: 'success'});
              }else{
                this.$message({message: result.message, type: 'error'});
              }
            })
      });
    },
    handleResource(index,row){
        // 给文件数组赋空值,防止将上一次的内容带到这一次
        this.imgFileList = [];
        this.viceimgFileList = [];
        this.moreimgFileList = [];
        // 展示弹框
        this.carResourceVisible = true;
        this.carResource.carId = row.id;
        // 根据车辆的ID查询该车辆的资源信息,如果有就要回显
        this.getCarResourcesByCarId(row.id);
    },
    getCarResourcesByCarId(carId){
      this.$http.get("/carResources/carid/"+carId)
          .then(result => {
            result = result.data;
            if(result.success){
              // {carId:null,img:"",viceimg:"",moreimg:""}
              if(result.data){
                if(result.data.img){
                  var imgs = result.data.img.split(",");
                  for(var i=0;i<imgs.length;i++){
                      var imgurl = imgs[i];
                      var name = imgurl.substring(imgurl.lastIndexOf("/")+1);
                      this.imgFileList.push({name:name,url:imgurl,response:{data:imgurl}})
                      // 给carResource对象中的img拼接字符串
                  }
                }
                if(result.data.viceimg){
                  var imgs = result.data.viceimg.split(",");
                  for(var i=0;i<imgs.length;i++){
                    var imgurl = imgs[i];
                    var name = imgurl.substring(imgurl.lastIndexOf("/")+1);
                    this.viceimgFileList.push({name:name,url:imgurl,response:{data:imgurl}})
                  }
                }
                if(result.data.moreimg){
                  var imgs = result.data.moreimg.split(",");
                  for(var i=0;i<imgs.length;i++){
                    var imgurl = imgs[i];
                    var name = imgurl.substring(imgurl.lastIndexOf("/")+1);
                    this.moreimgFileList.push({name:name,url:imgurl,response:{data:imgurl}})
                  }
                }
              }
            }
          })
    },
     // 主图
     imgHandleRemove(file, fileList){
      this.carResource.img = "";
      var filePath = file.response ? file.response.data : file.url;
      console.log("删除数据",filePath);
      this.$http.delete("/fastDfs?filePath="+filePath)
          .then(result => {
            result = result.data;
            if(result.success){
              this.$message({message: '删除成功!', type: 'success'});
              if(fileList && fileList.length > 0){
                  for(var i=0;i<fileList.length;i++){
                    var url = fileList[i].response ? fileList[i].response.data : fileList[i].url;
                    this.carResource.img += url+",";
                  }
                  if(this.carResource.img.endsWith(",")){
                    this.carResource.img = this.carResource.img.substring(0,this.carResource.img.length-1);
                  }
              }
              console.log(this.carResource)
            }else{
              this.$message({message: result.message, type: 'error'});
            }
          })
    },
    imgHandleSuccess(response, file, fileList){
      this.carResource.img = "";
      if(fileList && fileList.length > 0){
        for(var i=0;i<fileList.length;i++){
          var url = fileList[i].response ? fileList[i].response.data : fileList[i].url;
          this.carResource.img += url+",";
        }
        if(this.carResource.img.endsWith(",")){
          this.carResource.img = this.carResource.img.substring(0,this.carResource.img.length-1);
        }
      }
      console.log(file)
      console.log(this.carResource)
    },

    // 副图
    viceimgHandleRemove(file, fileList){
      this.carResource.viceimg = "";
      var filePath = file.response.data;
      this.$http.delete("/fastDfs?filePath="+filePath)
          .then(result => {
            result = result.data;
            if(result.success){
              this.$message({message: '删除成功!', type: 'success'});
              if(fileList && fileList.length > 0){
                for(var i=0;i<fileList.length;i++){
                  this.carResource.viceimg += fileList[i].response.data+",";
                }
                if(this.carResource.viceimg.endsWith(",")){
                  this.carResource.viceimg = this.carResource.viceimg.substring(0,this.carResource.viceimg.length-1);
                }
              }
              console.log(this.carResource)
            }else{
              this.$message({message: result.message, type: 'error'});
            }
          })
    },
    viceimgHandleSuccess(response, file, fileList){
      if(this.carResource.viceimg){
        this.carResource.viceimg = this.carResource.viceimg+","+response.data;
      }else{
        this.carResource.viceimg = response.data;
      }
      console.log(this.carResource.viceimg)
    },

    // 更多图
    moreimgHandleRemove(file, fileList){
      this.carResource.moreimg = "";
      var filePath = file.response.data;
      this.$http.delete("/fastDfs?filePath="+filePath)
          .then(result => {
            result = result.data;
            if(result.success){
              this.$message({message: '删除成功!', type: 'success'});
              if(fileList && fileList.length > 0){
                for(var i=0;i<fileList.length;i++){
                  this.carResource.moreimg += fileList[i].response.data+",";
                }
                if(this.carResource.moreimg.endsWith(",")){
                  this.carResource.moreimg = this.carResource.moreimg.substring(0,this.carResource.moreimg.length-1);
                }
              }
              console.log(this.carResource)
            }else{
              this.$message({message: result.message, type: 'error'});
            }
          })
    },
    moreimgHandleSuccess(response, file, fileList){
      if(this.carResource.moreimg){
        this.carResource.moreimg = this.carResource.moreimg+","+response.data;
      }else{
        this.carResource.moreimg = response.data;
      }
      console.log(this.carResource.moreimg)
    },
    // 事故排查图片
    checkHandleRemove(file, fileList){
      var filePath = file.response.data
      this.$http.delete('/fastDfs/delete?filePath=' + filePath).then((result) => {
        result = result.data
        if (result.success) {
          this.$message({ message: '删除成功!', type: 'success' })
          this.carCheck.accidentInvestigation = ''
        } else {
          this.$message({ message: result.message, type: 'error' })
        }
      })
    },
    checkHandleSuccess(response, file, fileList){
        this.carCheck.accidentInvestigation = response.data;
    },
    // 核心部件检测
    checkcoreHandleRemove(file, fileList){
      var filePath = file.response.data
      this.$http.delete('/fastDfs/delete?filePath=' + filePath).then((result) => {
        result = result.data
        if (result.success) {
          this.$message({ message: '删除成功!', type: 'success' })
          this.carCheck.coreComponentsInvestigation = ''
        } else {
          this.$message({ message: result.message, type: 'error' })
        }
      })
    },
    checkcoreHandleSuccess(response, file, fileList){
      this.carCheck.coreComponentsInvestigation = response.data;
    },
    // 常用功能检测
    checkfunctionHandleRemove(file, fileList){
      var filePath = file.response.data
      this.$http.delete('/fastDfs/delete?filePath=' + filePath).then((result) => {
        result = result.data
        if (result.success) {
          this.$message({ message: '删除成功!', type: 'success' })
          this.carCheck.commonFunctionsInvestigation = ''
        } else {
          this.$message({ message: result.message, type: 'error' })
        }
      })
    },
    checkfunctionHandleSuccess(response, file, fileList){
      this.carCheck.commonFunctionsInvestigation = response.data
    },
    checkranceHandleRemove(file, fileList){
      var filePath = file.response.data
      this.$http.delete('/fastDfs/delete?filePath=' + filePath).then((result) => {
        result = result.data
        if (result.success) {
          this.$message({ message: '删除成功!', type: 'success' })
          this.carCheck.appearanceInspection = ''
        } else {
          this.$message({ message: result.message, type: 'error' })
        }
      })
    },
    checkranceHandleSuccess(response, file, fileList){
      this.carCheck.appearanceInspection = response.data
    },
    coverHandleRemove(file, fileList) {
      var filePath = file.response.data
      this.$http.delete('/fastDfs/delete?filePath=' + filePath).then((result) => {
        result = result.data
        if (result.success) {
          this.$message({ message: '删除成功!', type: 'success' })
          this.carForm.cover = ''
        } else {
          this.$message({ message: result.message, type: 'error' })
        }
      })
    },
    coverHandleSuccess(response, file, fileList) {
      this.carForm.cover = response.data
    },
    search() {
      this.query.currentPage = 1
      this.getCars()
    },
    handleCurrentChange(val) {
      // val是当前页
      this.query.currentPage = val
      this.getCars()
    },
    //获取部门列表
    getCars() {
      this.listLoading = true // 弹出加载框
      this.$http
        .post('/car', this.query) // axios.defaults.baseURL+/car  http://localhost:80/api/car
        .then((result) => {
          result = result.data // result.data  {success:true,message:"",result:{total:1,rows:[]}}
          console.log(result)
          if (result.success) {
            console.log('车辆数据', result)
            this.pageInfo.rows = result.data.pageList
            this.pageInfo.total = result.data.count
            this.listLoading = false // 关闭加载框
          } else {
            this.$message({
              message: '查询分页失败!' + result.message,
              type: 'error',
            })
          }
        })
        .catch((result) => {
          this.$message({ message: '查询分页失败!', type: 'error' })
        })
    },
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          this.$http.delete('/car/' + row.id).then((result) => {
            result = result.data
            if (result.success) {
              this.$message({ message: '删除成功', type: 'success' })
              // 刷新列表
              this.query.currentPage = 1
              this.getCars()
              this.listLoading = false // 关闭弹出框
            } else {
              this.$message({
                message: '删除失败!' + result.message,
                type: 'error',
              })
            }
          })
        })
        .catch(() => {
          this.$message({ message: '已取消删除', type: 'info' })
        })
    },
    getDeptTree() {
      this.$http
        .get('/car/tree')
        .then((result) => {
          result = result.data // result => {successs:true,message:"",result:[]}
          if (result.success) {
            this.deptTree = result.result
          } else {
            this.$message({
              message: '获取部门树失败!' + result.message,
              type: 'error',
            })
          }
        })
        .catch((result) => {
          this.$message({ message: '获取部门树失败!', type: 'error' })
        })
    },
    getEmployeeList() {
      this.$http
        .get('/employee')
        .then((result) => {
          result = result.data
          if (result.success) {
            this.employees = result.result
          } else {
            this.$message({
              message: '获取员工列表失败!' + result.message,
              type: 'error',
            })
          }
        })
        .catch((result) => {
          this.$message({ message: '获取员工列表失败!', type: 'error' })
        })
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.carFormVisible = true
      this.carForm = Object.assign({}, row)
      this.getCarDetailByCarId(row.id)
      this.carForm.carDetail = this.carDetail
      console.log("编辑",this.carForm);
      if (this.carForm.manager == null) {
        this.carForm.manager = { id: null }
      }
      if (row.path != null) {
        let arrays = row.path.split('/') // ['', '1', '2', '20'] 根据/分割之后,第一个位置是一个空字符串,是不需要的,另外最后一个值是当前部门的id,而不是父部门的id,所以也不需要
        let ids = []
        for (let i = 1; i < arrays.length - 1; i++) {
          ids.push(parseInt(arrays[i])) // 数组分割之后里面的值都是字符串,而部门树的id都是数字,他们匹配不上就不能回显,因此需要parseInt()转一下
        }
        this.carForm.parent = ids
      }
      //this.carForm.parent = [1,2];
      // 获取所有的员工数据
      this.getEmployeeList()
      // 获取部门树
      this.getCarTypeTree()
    },
    getCarDetailByCarId(carId){
      this.$http.get("/carDetail/getByCarId/"+carId).then(res=>{
        res=res.data
        if(res.success){
          console.log("车辆详情",res.data);
          this.carDetail = res.data
        }else{
          this.$message.error(res.message)
        }
      })
    },
    //显示新增界面
    handleAdd: function () {
      this.carFormVisible = true
      this.carForm = {
        id: null,
        title: '',
        cover: '',
        saleprice: '',
        costprice: '',
        isnew: '',
        reigstertime: '',
        mileage: '',
        shopname: '',
        onsaletime: '',
        offsaletime: '',
        state: '',
        costeffective: '',
        rushsale: '',
        quasinewcar: '',
        transitivecountry: '',
        type: {
          id: null,
          name: '',
        },
        seller: {
          id: null,
          nickName: '',
        },
        carDetail: {
          info: '',
        },
        auditstate: '',
      }
      // 获取所有的员工数据
      this.getEmployeeList()
      // 获取车辆类型树
      this.getCarTypeTree()
    },
    getEmployeeList() {
      this.$http.get('/employee').then((res) => {
        res = res.data
        if (res.success) {
          this.employees = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getCarTypeTree() {
      this.$http.get('/carType/tree').then((res) => {
        res = res.data
        if (res.success) {
          this.carTypeTree = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //新增修改保存方法
    save: function () {
      this.$refs.carForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            // this.carFormLoading = true
            let para = Object.assign({}, this.carForm)
            // 级联下拉框绑定后的值是数组,但是后端的parent需要的是一个对象,所以需要我们手动转一下
            if (para.type != null) {
              let array = para.type
              // 当用户选择多级部门以后,对于该部门而言,最后一个部门id才是它的父部门
              para.type = { id: array[array.length - 1] }
            }
            console.log('保存车辆', para)
            this.$http
              .put('/car', para)
              .then((result) => {
                result = result.data
                if (result.success) {
                  this.$message({ message: '保存成功', type: 'success' })
                  this.carFormLoading = false
                  this.query.currentPage = 1
                  this.getCars()
                  this.carFormVisible = false
                } else {
                  this.$message({
                    message: '保存失败!' + result.message,
                    type: 'error',
                  })
                }
              })
              .catch((result) => {
                this.$message({ message: '保存失败!', type: 'error' })
              })
          })
        }
      })
    },
    selsChange: function (sels) {
      this.sels = sels
    },
    //批量删除
    batchRemove: function () {
      var ids = this.sels.map((item) => item.id).toString()
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          //NProgress.start();
          let para = { ids: ids }
          batchRemoveUser(para).then((res) => {
            this.listLoading = false
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success',
            })
            this.getCars()
          })
        })
        .catch(() => {})
    },
  },
  mounted() {
    this.getCars() // 做分页查询
  },
}
</script>

<style scoped></style>
